 <template>
   <el-card shadow="always" class="box-card">
      <div class="card-name search-item">
        <div class="name width1">调拨单</div>
        <div class="mr-15">
          <el-button size="medium" type="primary" @click="addRow">新增</el-button>
          <el-button size="medium" type="warning" @click="saveTable">保存</el-button>
        </div>
      </div>
      <div class="content-con">
        <el-form :model="form" ref="form" size="medium" label-width="100px">
          <el-row :gutter="24" type="flex" justify="space-between">
            <el-col :span="5">
              <el-form-item label="单据日期:" prop="check_date">
                <el-date-picker
                  v-model="form.check_date"
                  type="date"
                  format="yyyy-MM-dd"
                  placeholder="单据日期"
                  style="width: 100%;">
                </el-date-picker></el-form-item></el-col>
            <el-col :span="6">
              <el-form-item label="单据编号:" prop="billno">
                <el-input v-model="form.billno" :disabled="true" placeholder="单据编号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="bank-form">
            <div class="form-item">
              <el-table
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                class="table"
                stripe border
                show-summary
                :summary-method="getSummaries"
                @cell-dblclick="editData"
                :row-class-name="tableRowClassName"
                :header-cell-style="{background:'#f3f3f3',textAlign: 'center'}"
                :cell-style="{ textAlign: 'center' }">
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column prop="goods" label="商品" width="160">
                  <template slot-scope="scope">
                    <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '商品'">
                      <el-input v-model="scope.row.goods" size="mini" @blur="inputBlur">
                        <el-button slot="append" icon="el-icon-search" @click="openGoods"></el-button>
                      </el-input>
                    </span>
                    <span v-else>{{ scope.row.goods }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="100">
                </el-table-column>
                <el-table-column prop="amount" label="数量" width="100">
                  <template slot-scope="scope">
                    <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '数量'">
                      <el-input v-model="scope.row.amount" size="mini" @blur="inputBlur"/>
                    </span>
                    <span v-else>{{ scope.row.amount }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="callout" label="调出仓库(批量)" width="160">
                  <template slot-scope="scope">
                    <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '调出仓库(批量)'">
                      <el-input v-model="scope.row.callout" size="mini" @blur="inputBlur"/>
                    </span>
                    <span v-else>{{ scope.row.callout }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="callin" label="调入仓库(批量)" width="160">
                  <template slot-scope="scope">
                    <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '调入仓库(批量)'">
                      <el-input v-model="scope.row.callin" size="mini" @blur="inputBlur"/>
                    </span>
                    <span v-else>{{ scope.row.callin }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="note" label="备注" width="200">
                  <template slot-scope="scope">
                    <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '备注'">
                      <el-input v-model="scope.row.note" size="mini" @blur="inputBlur"/>
                    </span>
                    <span v-else>{{ scope.row.note }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="220">
                  <template slot-scope="scope">
                    <el-button type="text" @click.native.prevent="deleteRow(scope.$index,tableData)">
                      <i class="el-icon-delete"></i>删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页-页码 -->
            <div class="page">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
              </el-pagination>
            </div>
          </div>
          <div class="mt-20">
            <el-form-item label="备注信息:" prop="fnote">
              <el-input type="textarea" v-model="form.fnote" clearable placeholder="暂无备注信息"></el-input>
            </el-form-item>
          </div>
         </el-form>
      </div>
      <modal-goods ref="ModalGoods"></modal-goods>
   </el-card>

 </template>
<script>
import ModalGoods from '@/components/purchasing-system/ModalGoods';
export default {
  components: {
    ModalGoods
  },
  data () {
    return {
      tabClickIndex: null, // 点击的单元格
      tabClickLabel: '', // 当前点击的列名
      currentPage: 1, //当前页码
      pagesize: 10,    //每页的数据条数
      tableData: [], //表格数据
      form: {
        check_date: '',
        billno: 'CG202103161536361', //编号
        fnote: ''
      },
      accountList: [
        {value: '0',label: '（空）'},
        {value: '1',label: '多账户'}
      ]
    }
  },

  mounted() {
    this.getTime();
  },
  created() {
    // this.tableData.map(i => {
    //   i.show = false
    //   return i
    // })
  },

  methods: {
    //搜索
    search() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log(this.form)
          this.$message.success('成功!');
        } else {
          console.log('error submit!!');
          this.$message.error('失败!');
          return false;
        }
      });
    },

    //商品-选择-对话框
    openGoods() {
      this.$nextTick(()=>{
        this.$refs.ModalGoods.openGood();
      });
    },

    //添加一行
    addRow() {
      let j = {"goods": '',"unit": '',"amount": '',"callout": '',"callin": '',"note": ''}
      this.tableData.push(j);
      // this.tableData
    },
    //保存
    saveTable() {
      console.log(this.tableData)
      console.log(this.form)
    },
    //删除操作
    deleteRow(index, rows){
      rows.splice(index, 1);
    },

    tableRowClassName({row,rowIndex}) {
      // 把每一行的索引放进row
       row.index = rowIndex
    },
    // 添加明细原因 row 当前行 column 当前列
    //单元格被双击时
    editData(row, column, cell, event) {
      console.log(row,column)

      switch (column.label) {
        case '商品':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '数量':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '调出仓库(批量)':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '调入仓库(批量)':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '备注':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
      console.log('商品', this.tabClickIndex, row, column, cell, event)
    },
    // 失去焦点初始化
    inputBlur(row, event, column) {
      this.tabClickIndex = null
      this.tabClickLabel = ''
    },

    //表格合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = []; //声明变量
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if(
          column.property == "amount"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index]+='元';
        } else {
          // sums[index] = '';
        }
      });
      return sums;
    },

    //获取当前时间
    getTime(){
      let year = new Date().getFullYear(); //获取当前时间的年份
      let month = new Date().getMonth() + 1; //获取当前时间的月份
      let day = new Date().getDate(); //获取当前时间的天数
      //当小于 10 的是时候，在前面加 0
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      //拼接格式化当前时间
      this.form.check_date = year + "-" + month + "-" + day ;
    },

    //每页条数改变时触发事件,选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pagesize = val;
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    }
  }
}
</script>
<style lang="scss">
</style>
